.#{$theme-name} {
  .BasemapToggle {
    .toggleButton {
      background: $basemaptoggle-bg;
      @include user-select(none);
      @include calcite-box-shadow-base;
      cursor: pointer;
    }
    .basemapImage {
      width: $basemaptoggle-width;
      height: $basemaptoggle-height;
      overflow: hidden;
      .basemapBG {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
    .basemapImageContainer {
      position: relative;
    }
    .basemapTitle {
      display: block;
      width: 100%;
      color: $basemaptoggle-color;
      margin: 0;
      font-size: $basemaptoggle-font-size;
      line-height: $basemaptoggle-line-height;
      padding: $basemaptoggle-title-padding;
      background: $basemaptoggle-bg-fallback; // fallback
      background: $basemaptoggle-bg;
      text-align: center;
      position: absolute;
      bottom: 0;
      z-index: 2;
      @include box-sizing(border-box);
    }
  }
}

